<template>
  <div class="lookpower-page">
    <div class="type-top-box">
      <el-form size="small" :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="部门：">
          <el-select 
            filterable 
            :clearable="!lookParams.ad"
            v-model="formInline.dept" 
            placeholder="请选择">
            <el-option
              v-for="item in deptOptions"
              :key="item.value"
              :label="item.key"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>        
        <el-form-item label="关键字：">
          <el-input
            v-model="formInline.key"
            @keyup.enter.native="initData()"
            placeholder="请输入关键字搜索"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="initData()">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table v-loading="thisLoading" :border="true" :data="tableData" size="small" height="68vh">
      <el-table-column align="center" label="AD账户" width="170">
        <template slot-scope="scope">
          <span class="ad-names">{{scope.row.ad}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="姓名" width="120">
        <template slot-scope="scope">
          <span class="user-name">{{scope.row.userNm}}</span>
        </template>
      </el-table-column>      
      <el-table-column align="center" prop="topDept" label="所属部门"></el-table-column>      
      <el-table-column align="center" prop="position" label="岗位"></el-table-column>
      <el-table-column align="center" label="岗位层级">
        <template slot-scope="scope">
          <span>
            {{scope.row.posLevel}}-
            {{
            scope.row.posLevel == 1 ? '孔总' :
            scope.row.posLevel == 2 ? '公司领导' :
            scope.row.posLevel == 3 ? '部门负责人' :
            scope.row.posLevel == 4 ? '部门副职' :
            scope.row.posLevel == 5 ? '基层管理者' :
            scope.row.posLevel == 6 ? '普通员工' : ''
            }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="status" label="状态">
        <template slot-scope="scope">
          <span>
            {{
            scope.row.status == "1" ? '已开通' :
            scope.row.status == "0" ? '未开通' :
            scope.row.status == "2" ? '长假' :
            scope.row.status == "9" ? '离职' : ''
            }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            class="edig-text"
            @click="lookPower(scope.row)"
          >查看权限</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page-total">
      <pagination-table
        :total="total"
        :currentPage="pageIndex"
        :pagesize="formInline.pageSize"
        @pageChange="pageChange"
        @sizeChange="sizeChange"
      ></pagination-table>
    </div>
    <!-- 查看权限 -->
    <power-list ref="powerlist" :deptoptions="deptOptions"></power-list>
  </div>
</template>
<script>
import {
  Form,
  Table,
  FormItem,
  TableColumn,
} from "element-ui";
import Vue from "vue";
import PowerList from "./components/powerList";
import PaginationTable from "@/components/public/paginationTable";
import { getDatas, chengeEmoperate, deptgetByLoginAd } from "@/api/getData";
Vue.use(Form);
Vue.use(Table);
Vue.use(FormItem);
Vue.use(TableColumn);
export default {
  name: "StaffPower",
  components: {
    "power-list":PowerList,
    "pagination-table": PaginationTable
  },
  data() {
    return {
      total: 0,
      formInline: {
        dept: "",
        key: "",
        status: "1",
        pageSize: 20,
        pageIndex: 0
      },
      pageIndex: 1,
      tableData: [],
      deptOptions:[],
      lookParams:{key:""},
    };
  },
  computed: {
    thisLoading() {
      return this.$store.state.isLoading;
    },
  },
  mounted() {
    this.$store.dispatch("getThismsgUaa").then((res)=>{
      this.lookParams.ad = res.id;
      var list = res.authorities;
      if(list && list.length > 0){
        list.map((item)=>{
          if(item.authority == "ROLE_SUPERADMIN"){
            delete this.lookParams.ad
          }
        })
      }
      this.initdepList(this.lookParams);
    });
  },
  methods: {
    async initData(param) {
      this.$store.dispatch("changeLoading", true);
      try {
        if(!param){
          this.formInline.pageIndex = 0;
          this.pageIndex = 1;
          this.total = 0;
        }
        let data = await getDatas(this.formInline);
        this.tableData = data;
        if (data[0]) {
          this.total = data[0].total;
        } else {
          this.total = 0;
        }
        this.$store.dispatch("changeLoading", false);
      } catch (error) {
        console.log(error);
      }
    },
    async initdepList(lookParams) {
      try {
        let data = await deptgetByLoginAd(lookParams);
        var list = data.map(el => {
            return {
              key: el,
              value: el
            };
        });
        this.deptOptions = list;
        if(this.lookParams.ad && list.length >= 1){
          this.formInline.dept = list[0].value;
        }
        this.initData();
      } catch (error) {
        console.log(error);
      }
    },
     // 分页
    pageChange(num) {
      this.formInline.pageIndex = num - 1;
      this.initData("set");
    },
    // 改变表格分页条数
    sizeChange(num) {
      this.formInline.pageSize = num;
      this.initData();
    },
    // 查看权限
    lookPower(item) {
      this.$refs.powerlist.changeStatus(item)
    },
  }
};
</script>
<style lang="less" scoped>
@import url("./less/lookpower.less");
</style>